<template>
	<view class="com_mask_bg" :class="{ on: on }" v-if="objJudge(update_data)">
		<view class="com_mask_content" :class="ani_position" :style="{ height: `${change_var.win_height}rpx` }">
			<view class="com_mask" :style="{ height: `${change_var.win_height}rpx` }" @touchmove.stop.prevent="moveHandle"></view>
			<view class="ani_view" :class="ani_type" :style="[ani_view_style]">
				<view class="com_mask_view">
					<view class="com_mask_top">
						<view class="update_logo">
							<myimg imgsrc="/static/images/logo_update.png" width="124" radius="26"></myimg>
						</view>
						<view class="update_tt">
							<text class="title">发现新版本</text>
							<text class="version">v{{ update_data.versionCode_show }}</text>
						</view>

						<view @click.stop="mask_click()" class="com_close" v-if="update_data.update_type == 0">
							<myimg imgsrc="/static/images/com_close.png" width="30"></myimg>
						</view>
					</view>

					<view class="com_mask_show" v-if="objJudge(update_data.update_msg)">
						<!-- <text class="c_tt">
							{{ show_content }}
						</text> -->
						<rich-text :nodes="formatRichText(update_data.update_msg)"></rich-text>
					</view>

					<view class="btns_view">
						<btns :title="confirm_tt" btn_class="" height="88" :padding="[50, 40]" @module_btn_click="popup_btn_click(1)" v-if="objJudge(confirm_tt)"></btns>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { common } from '@/util/method.js';

import storeMixin from '@/store/storeMixin';
export default {
	mixins: [storeMixin],
	name: 'updatePopup',
	props: {
		// bot_top 底部向上
		ani_type: {
			type: [String],
			default: 'scale',
		},

		ani_position: {
			type: [String],
			default: 'center',
		},

		popup_config: {
			type: [Object],
			default: function () {
				return {};
			},
		},
	},
	data() {
		return {
			on: false,
			change_var: {},
			show_content: '',
			confirm_tt: '立即更新',
			cancel_tt: '',
			update_data: {},
		};
	},
	created() {
		this.init_pagedata('updatePopup');
	},
	watch: {},
	computed: {
		ani_view_style() {
			let padding = `60rpx`;
			// if (this.COMMON_VAR.safeAreaInsets_bot > 0) {
			// 	let _bot = this.COMMON_VAR.safeAreaInsets_bot;
			// 	padding = `20rpx 20rpx ${_bot}rpx`;
			// }
			return {
				padding,
			};
		},
	},
	methods: {
		...common,
		init_pagedata_callback() {
			let _this = this;
			_this.com_getdata({
				url: '/base/app',
				id_name: '',
				data: {
					app_type: _this.COMMON_VAR.platform,
					//
				},
				data_fun: function (res) {
					if (res.state == 1) {
						if (_this.objJudge(res.info)) {
							// _this.update_data = res.info;
							_this.update_judge(res.info);
						} else {
							_this.on = false;
						}
					} else {
						_this.on = false;
					}
				},
			});
		},
		update_judge(info) {
			let _this = this;
			let update_cache = uni.getStorageSync('app_update_cache') || {};
			let last_update = {}; // 最后的APP更新信息

			if (_this.COMMON_VAR.versionCode < info.app_version) {
				// 小于线上APP版本
				if (_this.objJudge(update_cache)) {
					if (update_cache.id == info.id) {
						// 同一个APP更新信息
						let diff = _this.compare_time(false, update_cache.update_nextshow);
						if (diff > 0) {
							// 还未到显示间隔时间
						} else {
							// 已过间隔可以重新提醒
							last_update = update_cache;
						}
					} else {
						last_update = info;
					}
				} else {
					last_update = info;
				}
			}

			if (_this.objJudge(last_update)) {
				if (last_update.update_type == 0) {
					//  非强制更新
					let interval = 1000 * 60 * 60 * 24 * 7; // 间隔多久再次提醒  7天
					let update_nextshow = new Date().getTime() + interval;
					last_update['update_nextshow'] = update_nextshow;
					uni.setStorageSync('app_update_cache', last_update);
				} else {
					uni.setStorageSync('app_update_cache', {});
				}
				let n = last_update.app_version.toString();
				last_update['versionCode_show'] = `${n.substr(0, 1)}.${n.substr(1, 1)}.${n.substr(2)}`;
				_this.update_data = last_update;
				setTimeout(() => {
					_this.on = true;
				}, 300);
			}
		},
		popup_btn_click(type) {
			let _this = this;
			let { platform } = _this.COMMON_VAR;

			switch (platform) {
				case 'ios':
					// 跳转AppStore
					let appleId = 6502671019;
					plus.runtime.launchApplication({
						action: `itms-apps://itunes.apple.com/cn/app/${appleId}`,
					});
					break;

				case 'android':
					// 跳转安卓应用市场
					let appurl = 'market://details?id=com.balin.tech.app';
					plus.runtime.openURL(appurl);
					break;
			}
		},
		mask_click() {
			let _this = this;
			_this.on = false;
		},
	},
};
</script>

<style lang="scss">
.com_mask_bg {
	// width: 100%;
	// height: 100vh;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 990;
	visibility: hidden;

	&.on {
		visibility: visible;

		.com_mask {
			opacity: 1;
			visibility: visible;
		}

		.ani_view {
			&.bot_top {
				transform: translateY(0%);
			}

			&.scale {
				// transition: all 0s;
				opacity: 1;
				transform: scale(1);
			}
		}
	}

	.com_mask_content {
		width: 750rpx;
		height: 100vh;
		position: relative;
		z-index: 2;
		display: flex;
		flex-direction: column;
		align-items: center;

		&.bot {
			justify-content: flex-end;
		}

		&.top {
			justify-content: flex-start;
		}

		&.center {
			justify-content: center;
		}
	}

	.com_mask {
		// width: 100%;
		// height: 100%;
		background-color: rgba(0, 0, 0, 0.55);
		position: absolute;
		left: 0;
		right: 0;
		z-index: 1;
		opacity: 0;
		visibility: hidden;
		transition: all 0.3s;
		-webkit-transition: all 0.3s;
		-moz-transition: all 0.3s;
		-ms-transition: all 0.3s;
		-o-transition: all 0.3s;
	}

	.ani_view {
		position: relative;
		z-index: 2;
		// padding: 30rpx;
		width: 750rpx;
		transition: all 0.3s;
		-webkit-transition: all 0.3s;
		-moz-transition: all 0.3s;
		-ms-transition: all 0.3s;
		-o-transition: all 0.3s;

		&.bot_top {
			transform: translateY(100%);
		}

		&.scale {
			opacity: 0;
			transform: scale(1.05);
		}
	}
}

.com_mask_view {
	background-color: #ffffff;
	border-radius: 20rpx;
	overflow: hidden;
	.com_mask_top {
		position: relative;
		background-color: #f5f5f5;
		padding: 40rpx 0 34rpx;
		// height: 90rpx;

		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.com_close {
			width: 70rpx;
			height: 70rpx;
		}

		.update_tt {
			margin-top: 20rpx;
			line-height: 1;
		}
		.title {
			font-size: 42rpx;
			font-weight: bold;
			color: #000000;
		}
		.version {
			margin-left: 10rpx;
			font-size: 30rpx;
			color: #7b7b7d;
		}
	}

	.com_mask_show {
		padding: 36rpx 58rpx 20rpx;

		.c_tt {
			font-weight: 400;
			font-size: 28rpx;
			color: #000000;
		}
	}

	// .com_mask_btn {
	// 	padding: 12rpx 36rpx;

	// }
}
</style>
